<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="utf-8">
			;
			(function(designWidth, rem2px, window, document) {
				var d = document.createElement('div');
				var m = document.createElement('meta');
				var scaleValue = 1 / window.devicePixelRatio;
				d.style.width = '1rem';
				d.style.display = "none";
				m.setAttribute("name", "viewport");
				m.setAttribute("content", "width=device-width,initial-scale=" + scaleValue + ",minimum-scale=" + scaleValue +
					",maximum-scale=" + scaleValue + ",user-scalable=no");
				var head = document.getElementsByTagName('head')[0];
				head.appendChild(d);
				head.insertBefore(m, head.firstElementChild);
				var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
				d.remove();
				document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
				var st = document.createElement('style');
				var portrait = "@media screen and (min-width: " + window.innerWidth + "px) {html{font-size:" + ((window.innerWidth /
					(designWidth / rem2px) / defaultFontSize) * 100) + "%;}}";
				var landscape = "@media screen and (min-width: " + window.innerHeight + "px) {html{font-size:" + ((window.innerHeight /
					(designWidth / rem2px) / defaultFontSize) * 100) + "%;}}"
				st.innerHTML = portrait + landscape;
				head.appendChild(st);
				return defaultFontSize
			})(750, 100, window, document);
		</script>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="content-wrap">
				<!-- 单选框 -->
				<lg-card>
					<lg-row :item-center="true" style="height: 1rem;">
						<lg-col span="1" style="background-color: gold;">
							<lg-radio disabled></lg-radio>
						</lg-col>
					</lg-row>

				</lg-card>
				<lg-card gap-outer=".2" gap-interior=".2" :body-style="{backgroundColor:'white'}">
					<lg-input-group>
						<lg-input v-model="value" label="零件名称零件名称零件名称零件名称零件名称" :disabled="true"></lg-input>
						<lg-input label="只读" readonly="true"></lg-input>
						<lg-input label="无效的控件" :disabled="false"></lg-input>
						<lg-input label="最大字符长度" maxlength="1"></lg-input>
						<lg-input label="自动获得焦点" :autofocus="false"></lg-input>
						<lg-input label="bodyStyle" :body-style="{backgroundColor:'red'}"></lg-input>
						<lg-input label="classStyle" :body-class="{'backgroundColor-red':true}"></lg-input>
						<lg-input label="labelFlex:" label-flex="6" input-flex="12"> </lg-input>
						<lg-input label="使用单击"></lg-input>
						<lg-input label="三角" readonly="true">
							<lg-triangle-hollow slot="icon"></lg-triangle-hollow>
						</lg-input>
					</lg-input-group>
				</lg-card>
				<!-- 文本域 -->
				<lg-card>
					<lg-textarea label="我就是我是" v-model="value" :disabled="false" :readonly="false" :label-style="{marginLeft:'.3rem'}"
					 :textarea-style="{}" rows="6"></lg-textarea>
				</lg-card>
				<!-- flex布局  -->
				<lg-card style="height: 1rem; background-color: red;">
					<lg-row :item-center="true" style="background-color: gold;">
						<lg-col span="1" order="3">1</lg-col>
						<lg-col span="1" order="2">2</lg-col>
						<lg-col span="1" order="1">3</lg-col>
					</lg-row>
				</lg-card>

			</div>
		</div>
		<!-- 模板 >>> -->

		<!-- 面板 start -->
		<script type="text/x-template" id="lg-card">
			<div class="lg-card"  :style="[gapStyleObj,bodyStyle]"><slot></slot></div>
		</script>
		<!-- 面板 end -->
		<!-- Form start -->
		<script type="text/x-template" id="lg-input-group">
			<div class="lg-input-group"><form class="lg-form " :style="[formStyle]" :class="[formClass,getReadonly]" :id="formId" > <slot></slot> </form>
			</div>
		</script>
		<!-- Form end -->
		<!-- 输入框 start -->
		<script type="text/x-template" id="lg-input">
			<div class="lg-input-row">
				<div class="lg-row-label-wrap" :style="[getLabelWrapStyle]">
					<label :class="['lg-input-label',labelClass]" :style="[labelStyle]" v-text="label" ></label>
				</div>
				<div class="lg-row-input-wrap" :style="[getInpuWrapStyle]" >
					<input 
					 class="lg-input" 
					 type="text"
					 :value="currentValue" 
					 @change="handleChange" 
					 @input="handleInput" 
					 :name="name" 
					 :id="id" 
					 :placeholder="placeholder" 
					 :disabled="disabled" 
					 :readonly="getReadonly"
					 :maxlength="maxlength"
					 :autofocus="autofocus"
					 :style="[inputStyle]"
					 :class="[inputClass]"
				  />
				</div>
				<slot name="icon"></slot>
			</div>
		</script>
		<!-- 输入框 end-->
		<!-- 空心三角形 start -->
		<script type="text/x-template" id="lg-triangle-hollow">
			<div  class="lg-row-icon-wrap" >
				<div class="lg-triangle-hollow">
				</div>
			</div>
		</script>
		<!-- 空心三角形 end -->
		<!-- 文本域 start -->
		<script type="text/x-template" id="lg-textarea">
			<div class="lg-textarea-wrap">
				<label class="lg-textarea-label" v-text="label" :style="[labelStyle]" :class="labelClass"></label>
				<textarea class="lg-textarea" :value="currentValue" :rows="rows"  @input="changeTextareaHeight()" :disabled="disabled" :readonly="readonly" :style="[textareaStyle]" :class="textareaClass" ></textarea>
			</div>
		</script>
		<!-- 文本域 end -->
		<!-- flex布局 row  start -->
		<script type="text/x-template" id="lg-row">
			<div :class="['lg-row',{'lg-row-center':itemCenter}]" :style="[getJustifyStyle,getAlignStyle,getDirection]">
			    <slot></slot>
			</div>
		</script>
		<!-- flex布局 row end -->
		<!-- flex布局 col  start -->
		<script type="text/x-template" id="lg-col">
			<div class="lg-col"  :style="[{flex:span,order:order,flexBasis:basis},getSelf ]">
			    <slot></slot>
			</div>
		</script>
		<!-- flex布局 col end -->
		<!-- radioGroup  start -->
		<script type="text/x-template" id="lg-radio-group">
			<div :class="classes" :name="name" >
			    <slot></slot>
			</div>
		</script>
		<!-- radioGroup end -->
		<!--  radio  start -->
		<script type="text/x-template" id="lg-radio">
			<label :class="wrapClasses">,
			    <span class="radioClasses">
				<span :class="innerClasses"></span>
				<input 
					type="radio"
					:class="inputClasses"
					:disabled="itemDisabled"
					:checked="currentValue"
					:name = "groupName"
					@change="change"
					@focus="onFocus"
					@blur="onBlur"
				 />
				</span><slot>{{label}}</slot>
			</label>
		</script>
		<!-- flex布局 radio end -->
		<!-- 模板 <<< -->
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="./js/component.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="./lgUtils.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>
